<template>
	<view class="container">
		<text>hello uni-app</text>
		<text>这个页面隐藏了导航栏，具体配置参见page.json中的`pages/class2/616`文件</text>
		<view class="">
			<text>禁用按钮示例：</text>
			<view class="">
				<input type="idcard" v-model="val1" />
			</view>
			<button type="warn" :disabled="disabled" size="mini"
				@tap="tapHandler" @longtap="longtapHandler">click</button>
		</view>
		<view class="">
			<image src="/static/shuijiao.jpg" mode="scaleToFill"></image>
		</view>
		<view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 300px;"
						:latitude="latitude" :longitude="longitude" :markers="covers">
					</map>
				</view>
			</view>
			<!-- 一般用法 -->
			<uni-collapse @change="change">
			    <uni-collapse-item title="1标题文字">
			        <uni-list>
			            <uni-list-item title="1标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
			            <uni-list-item title="1标题文字" note="描述信息" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"></uni-list-item>
			            <uni-list-item title="1标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
			        </uni-list>
			    </uni-collapse-item>
			    <uni-collapse-item title="1默认开启" :open="true">
			        <view style="padding: 30rpx;"> 1折叠内容主体，可自定义内容及样式 </view>
			    </uni-collapse-item>
			    <uni-collapse-item title="1禁用状态" :disabled="true">
			        <view style="padding: 30rpx;"> 1禁用状态 </view>
			    </uni-collapse-item>
			</uni-collapse>
			
			<!-- 手风琴效果 -->
			<uni-collapse accordion="true">
			    <uni-collapse-item title="标题文字">
			        <view style="padding: 30rpx;">
			            手风琴效果
			        </view>
			    </uni-collapse-item>
			    <uni-collapse-item title="标题文字">
			        <view style="padding: 30rpx;">
			            手风琴效果
			        </view>
			    </uni-collapse-item>
			    <uni-collapse-item title="标题文字">
			        <view style="padding: 30rpx;">
			            手风琴效果
			        </view>
			    </uni-collapse-item>
			</uni-collapse>
			
			<!-- 带图标 -->
			<uni-collapse>
			    <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png">
			        <view style="padding: 30rpx;">
			            折叠内容主体，可自定义内容及样式
			        </view>
			    </uni-collapse-item>
			    <uni-collapse-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png">
			        <view style="padding: 30rpx;">
			            折叠内容主体，可自定义内容及样式
			        </view>
			    </uni-collapse-item>
			</uni-collapse>
			<uni-combox label="选择收货地址" :candidates="candidates" v-model="location"></uni-combox>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				val1: '',
				latitude: 34.75,
				longitude: 113.62,
				covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}, {
						latitude: 39.90,
						longitude: 116.39,
						iconPath: '../../../static/location.png'
					}],
				location: '',
				// 候选字段，也就是选项
				candidates: [
					'郑州',
					'杭州',
					'邓州',
					'广州',
					'林州',
					'洛阳',
					'沈阳',
					'揭阳'
				]
				}
		},
		onLoad: function(e) {
			console.log(e.name);
		},
		methods: {
			tapHandler() {
				this.disabled = true;
				console.log(this.val1);
				// 页面跳转的第二种方式
				uni.navigateTo({
					url: '../index/index?num=' + this.val1
				})
			},
			// 长按的处理
			longtapHandler() {
				console.log(777);
				uni.request({
					url: 'https://api.imjad.cn/cloudmusic/?type=comments&id=28012031',
					method: 'GET',
					success(res) {
						console.log(res.data.hotComments[0].content)
					}
				})
			},
			change() {
				console.log('我 change 了')
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
